<template>
  <div id="header">
    <!-- 这块注意以后会用到的 背景图片的设置 -->
    <div class="bgc" :style="pic_url">
      <!-- <img :src="poiInfo.head_pic_url" alt /> -->
    </div>
    <div class></div>
    <div class="top-wrapper">
      <div class="back-wrapper">
        <span class="iconfont icon-fanhui"></span>
      </div>

      <form class="search-wrapper">
        <span class="search-icon"></span>
        <input type="text" placeholder="搜索店内商品" />
      </form>
      <div class="icon">
        <div class="iconfont icon-integral"></div>
      </div>
      <div class="more-wrapper">
        <a href="#" class="spelling-bt">拼单</a>
      </div>
      <div class="header-content">
        <span class="header-icon">
          <img :src="poiInfo.pic_url" />
        </span>
        <span class="name">{{poiInfo.name}}</span>
        <span class="collection">
          <i class="iconfont icon-lights"></i>
          <h5>收藏</h5>
        </span>
      </div>
      <!-- 推荐 -->
      <div class="recommend">
        <span class="first">首</span>
        <span class="newUsers">新用户立减17元，首次使用银行卡支付最高减3元</span>
        <span class="active">1个活动</span>
        <i class="iconfont icon-jinru" @click="showClick"></i>
      </div>
    </div>
    <!-- clickShow 这里还加了动画的一个效果-->
    <transition name="transitions">
      <div class="clickShow" :style="background" v-show="clickShow">
        <!-- <div class="clickShow" v-show="clickShow"> -->
        <div class="logo">
          <img :src="poiInfo.pic_url" alt />
        </div>
        <div class="name">{{poiInfo.name}}</div>
        <!-- 星级评价 -->
        <div class="star">
          <!-- :star是要传递过去的值 -->
          <app-star :score="poiInfo.wm_poi_score"></app-star>
          <span>{{ poiInfo.wm_poi_score}}</span>
        </div>
        <div></div>
        <div class="span">
          <span>{{poiInfo.min_price_tip+'|'}}</span>
          <span>{{poiInfo.shipping_fee_tip+'|'}}</span>
          <span>{{poiInfo.delivery_time_tip}}</span>
          <div class="time">配送时间:{{poiInfo.shipping_time}}</div>
        </div>
        <hr />
        <div>
          <span class="first">首</span>
          <span class="newUsers">新用户立减17元，首次使用银行卡支付最高减3元</span>
          <span class="active">1个活动</span>
        </div>
        <!-- close -->
        <div class="close">
          <button @click="closeShow">X</button>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import axios from "axios";
import Star from "./star/star.vue";
export default {
  data() {
    return {
      poiInfo: {},
      clickShow: false
    };
  },
  components: {
    appStar: Star
  },
  // 有计算属性的返回背景图片就不会拉伸
  computed: {
    pic_url() {
      return "background-image:url(" + this.poiInfo.head_pic_url + ")";
    },
    background() {
      return "background-image:url(" + this.poiInfo.poi_back_pic_url + ")";
    }
  },
  methods: {
    showClick() {
      this.clickShow = true;
    },
    closeShow() {
      this.clickShow = false;
    }
  },
  created() {
    //   axios库
    // axios
    //   .get("api/goods")
    //   .then(res => {
    //     //   console.log(res.data.data);
    //     return res.data;
    //   })
    //   .then(response => {
    //     console.log(response.data.poi_info);
    //     if (response.code == 0) {
    //       this.poiInfo = response.data.poi_info;
    //     }
    //   });
    // fetch
    fetch("/api/goods")
      .then(res => {
        return res.json();
      })
      .then(response => {
        // console.log(response);
        if (response.code == 0) {
          // 这里就拿到来自goods.json的数据了
          this.poiInfo = response.data.poi_info;
          // console.log(this.poiInfo);
        }
      });
  }
};
</script>
<style scope>
/* 背景图的设置 */
.bgc {
  position: absolute;
  top: 0;
  left: 0;
  height: 150px;
  width: 100%;
  z-index: -1;
  background-size: 100% 135%;
  background-position: center -12px;
}
.close {
  margin-top: 100px;
}
.close button {
  background-color: rgb(240, 73, 73);
  outline: 0;
  border: 0;
  border-radius: 4px;
}
.clickShow {
  position: absolute;
  top: 0;
  left: 0;
  height: 500px;
  width: 100%;
  /* background-color: #fff; */
  z-index: 999;
  text-align: center;
  font-size: 12px;
  color: rgb(235, 202, 202);
}
.clickShow .name {
  padding: 30px 0;
}
.clickShow .time {
  padding: 30px 0;
}
.collection {
  font-size: 12px;
  margin-top: 50px;
  padding-left: 20px;

  float: right;
}
.logo img {
  width: 60px;
  height: 60px;
  padding: 30px 0 0 0;
}
.recommend {
  position: absolute;
  top: 129px;
  left: 11px;
  color: rgb(231, 225, 225);
  font-size: 10px;
}
.first {
  background-color: rgb(212, 122, 86);
  border-radius: 2px;
}
.recommend .active {
  padding-left: 19px;
}
.newUsers {
  padding-left: 10px;
}

.collection i {
  padding-left: 3px;
}
.collection h5 {
  padding-right: 5px;
}
.header-icon {
  position: absolute;
  top: 42px;
  left: 10px;
}
.header-icon img {
  width: 50%;
  height: 10%;
}
.header-content {
  position: relative;
  color: #fff;
}
.header-content .name {
  position: absolute;
  top: 66px;
  left: 13%;
  padding-left: 50px;
}
/* .bgc img {
  width: 100%;
  height: 125px;
} */
.name {
  display: block;
}
#header {
  height: 120px;
  padding-top: 20px;
}
.back-wrapper,
.search-wrapper {
  float: left;
}
/* .back-wrapper,
.icon,
.more-wrapper {
  width: 33%;
} */
.more-wrapper {
  margin-right: 8px;
}
.search-wrapper {
  padding-left: 20px;
}
.search-wrapper input {
  padding-left: 20px;
  width: 200px;
  height: 20px;
  border-radius: 28px;
  outline: 0;
}
.search-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  position: relative;
  top: 5px;
  left: 20px;
  background-color: #eee;
  background: url(./img/search.png) no-repeat;
  /* background-position: 0; */
  background-size: 20px 20px;
}
.more-wrapper,
.icon {
  float: right;
  color: #fff;
}
.spelling-bt {
  border: 1px solid #fff;
  color: #fff;
  font-size: 13px;
}
.back-wrapper {
  color: #fff;
}
/* 动画 */
/* 进入和离开是两秒 */
.transitions-enter-active,
.transitions-leave-active {
  transition: 2s all;
}
/* 进入和已经离开 */
.transitions-enter,
.transitions-leave-to {
  opacity: 0;
}
/* 已经进入和离开 */
.transitions-enter-to,
.transitions-leave {
  opacity: 1;
}
</style>
